﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Chatriq - Chat & Taskmanager</title>
    <meta name="description"
          content="The ultimate Bootstrap based Messaging framework to help build Messaging or Chat application fast and easy. Fully responsive and crafted with modern elements and latest design">
    <meta name="keywords" content="Chatriq, chat, messaging, theme, platform"/>
    <meta name="subject" content="">
    <meta name="copyright" content="">
    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon"/>

    <link rel="stylesheet" type="text/css" href="dist/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendors/perfect-scrollbar/perfect-scrollbar.css">
    <link rel="stylesheet" type="text/css" href="dist/css/app.css">
    <link rel="stylesheet" type="text/css" href="dist/css/theme/default-theme.css">
</head>
<body class="default-theme">
<!-- Preloader Start -->
<div class="preloader"></div>
<!-- Preloader end -->

<!-- main wrapper start -->
<div class="main-wrapper">
    <div class="chatapp">
        <!-- navbar start -->
        <nav id="navbar" class="navbar navbar-expand-md navbar-light fixed-top bg-white border-bottom shadow-sm">
            <a class="navbar-brand" href="index.html">
                <img src="assets/images/logo.svg" width="50" height="50" class="d-inline-block align-top" alt="">
                <h1>聊天室（Netty版）</h1>
            </a>

            <div class="ml-auto d-flex align-items-center">
                <div class="iconbox iconbox-search btn-hovered-light">
                    <i class="iconbox__icon mdi mdi-magnify"></i>
                </div>
                <div class="navbar-nav">
                    <div class="dropdown user-nav">
                        <div class="user-avatar user-avatar-sm user-avatar-rounded" role="button" data-toggle="dropdown"
                             aria-haspopup="true" aria-expanded="false">
                            <div class="chatriq-user chatriq-user-01"></div>
                        </div>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="javascript:;">
                                <span><i class="mdi mdi-account-outline"></i></span>
                                <span>Profile</span>
                            </a>
                            <a class="dropdown-item" href="javascript:;">
                                <span><i class="mdi mdi-account-multiple-plus-outline"></i></span>
                                <span>Invite People</span>
                            </a>

                            <a class="dropdown-item" href="javascript:;">
                                <span><i class="mdi mdi-settings-outline"></i></span>
                                <span>Settings</span>
                            </a>

                            <a class="dropdown-item" href="javascript:;">
                                <span><i class="mdi mdi-help-circle-outline"></i></span>
                                <span>Help</span>
                            </a>
                            <a class="dropdown-item" href="javascript:;">
                                <span><i class="mdi mdi-comment-quote-outline"></i></span>
                                <span>Feedback</span>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="javascript:;">
                                <span><i class="mdi mdi-logout-variant"></i></span>
                                <span>Logout</span>
                            </a>
                        </div>
                    </div>
                    <div class="iconbox-searchbar">
                        <formll>
                            <input type="text" class="form-control" placeholder="搜索用户昵称..." id="findUserName" autofocus>

                            <button class="search-submit" type="submit" id="findUser">
                                <i class="mdi mdi-magnify"></i>
                            </button>
                            <a href="javascript:void(0)" class="search-close">
                                <i class="mdi mdi-arrow-left"></i>
                            </a>
                        </formll>
                    </div>
                </div>
            </div>
        </nav>
        <!-- navbar end -->

        <!-- sidebar start -->
        <div class="chatapp__sidebar">
            <ul class="nav" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link" href="index.html">
                        <i class="mdi mdi-message-text-outline"></i><span>闲聊广场</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="privateChat.html">
                        <i class="mdi mdi-phone-outline"></i><span>私聊</span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link active" href="contacts.html">
                        <i class="mdi mdi-account-box-outline"></i><span>通讯录</span>
                    </a>
                </li>
            </ul>
        </div>
        <!-- sidebar end -->
        <div class="chatapp__content">
            <div class="chatapp__contactstab">
                <!-- user list start -->
                <div class="chatapp-user-list">
                    <div class="chatapp-user-list-body custom-scrollbar">
                        <ul class="list-unstyled" id="friendHtml">
                            <!--<li class="border-bottom-0">-->
                            <!--<div class="contactlist-heading">-->
                            <!--<span>Favourite</span>-->
                            <!--</div>-->
                            <!--</li>-->
                            <li>
                                <div class="contactlist">
                                    <div class="user-avatar user-avatar-rounded online">
                                        <div class="chatriq-user chatriq-user-02"></div>
                                    </div>
                                    <div class="contactlist__details">
                                        <div class="contactlist__details--name">Jack P. Angulo</div>
                                        <div class="contactlist__details--info">Brother</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="contactlist">
                                    <div class="user-avatar user-avatar-rounded online">
                                        <div class="chatriq-user chatriq-user-02"></div>
                                    </div>
                                    <div class="contactlist__details">
                                        <div class="contactlist__details--name">Jack P. Angulo</div>
                                        <div class="contactlist__details--info">Brother</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="contactlist">
                                    <div class="user-avatar user-avatar-rounded online">
                                        <div class="chatriq-user chatriq-user-02"></div>
                                    </div>
                                    <div class="contactlist__details">
                                        <div class="contactlist__details--name">Jack P. Angulo</div>
                                        <div class="contactlist__details--info">Brother</div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- user list end -->

                <!-- contact profile wrapper start -->
                <div class="contactist-profile-wrapper custom-scrollbar">
                    <div class="container">
                        <div class="back-button-md back2contacts">
                            <i class="mdi mdi-arrow-left"></i>
                            <span>返回</span>
                        </div>
                        <div class="ca-profile-thumb" style="background-image: url(assets/images/media/01.jpg)">
                            <div class="ca-profile-info">
                                <div class="ca-profile-pic"><img src="assets/images/user/150/01.jpg" alt=""></div>
                            </div>
                            <div class="ca-profile-actions">
                                <div class="iconbox-group">
                                    <!--<div class="iconbox btn-hovered-light">-->
                                    <!--<i class="iconbox__icon mdi mdi-star-outline"></i>-->
                                    <!--</div>-->
                                    <!--<div class="iconbox btn-hovered-light">-->
                                    <!--<i class="iconbox__icon mdi mdi-pencil-outline"></i>-->
                                    <!--</div>-->
                                    <!--<div class="iconbox btn-hovered-light">-->
                                    <!--<i class="iconbox__icon mdi mdi-dots-horizontal"></i>-->
                                    <!--</div>-->
                                </div>
                            </div>

                            <div class="ca-overlay"></div>
                        </div>

                        <div class="profile-settings-list border mb-5">
                            <div class="ca-profile-title">
                                <h2 class="ca-profile-name">
                                    Pearl Villarreal
                                    <div class="iconbox btn-hovered-light">
                                        <i class="iconbox__icon mdi mdi-pencil-outline"></i>
                                    </div>
                                </h2>
                                <div class="ca-profile-tag">
                                    <span>Co-Workers</span>
                                </div>
                                <div class="ca-contcat-profile__calling-buttons pt-2">

                                    <div class="iconbox iconbox-pill btn-outline-light">
                                        <i class="iconbox__icon mdi mdi-message-text-outline"></i>
                                        <span>发消息</span>
                                    </div>
                                    <!--<div class="iconbox iconbox-pill btn-outline-light">-->
                                    <!--<i class="iconbox__icon mdi mdi-phone"></i>-->
                                    <!--<span>Voice Call</span>-->
                                    <!--</div>-->
                                    <!--<div class="iconbox iconbox-pill btn-outline-light">-->
                                    <!--<i class="iconbox__icon mdi mdi-video-outline"></i>-->
                                    <!--<span>Video Call</span> -->
                                    <!--</div>-->
                                </div>
                            </div>

                            <div class="setting-sunheading  setting-sunheading-style01  my-3">个人信息</div>
                            <ul class="list-unstyled">
                                <li>
                                    <div class="ps-list">
                                        <div class="ps-list__left">
                                            <div class="ps-list__left--icon"><i
                                                    class="mdi mdi-account-heart-outline"></i></div>
                                            <div class="ps-list__left--name">昵称</div>
                                        </div>
                                        <div class="ps-list__right">---</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ps-list">
                                        <div class="ps-list__left">
                                            <div class="ps-list__left--icon"><i class="mdi mdi-gender-male-female"></i>
                                            </div>
                                            <div class="ps-list__left--name">性别</div>
                                        </div>
                                        <div class="ps-list__right">---</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ps-list">
                                        <div class="ps-list__left">
                                            <div class="ps-list__left--icon"><i class="mdi mdi-cake"></i></div>
                                            <div class="ps-list__left--name">生日</div>
                                        </div>
                                        <div class="ps-list__right">---</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ps-list">
                                        <div class="ps-list__left">
                                            <div class="ps-list__left--icon"><i class="mdi mdi-cellphone-android"></i>
                                            </div>
                                            <div class="ps-list__left--name">手机</div>
                                        </div>
                                        <div class="ps-list__right">---</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ps-list">
                                        <div class="ps-list__left">
                                            <div class="ps-list__left--icon"><i class="mdi mdi-email-outline"></i></div>
                                            <div class="ps-list__left--name">邮箱</div>
                                        </div>
                                        <div class="ps-list__right">---@email.com</div>
                                    </div>
                                </li>
                            </ul>


                            <div class="setting-sunheading setting-sunheading-style01 my-4">社交帐号</div>


                            <ul class="list-unstyled">
                                <li>
                                    <div class="ps-list">
                                        <div class="ps-list__left">
                                            <div class="ps-list__left--icon"><i class="mdi mdi-facebook"></i></div>
                                            <div class="ps-list__left--name">QQ</div>
                                        </div>
                                        <div class="ps-list__right">---</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ps-list">
                                        <div class="ps-list__left">
                                            <div class="ps-list__left--icon"><i class="mdi mdi-instagram"></i></div>
                                            <div class="ps-list__left--name">微信</div>
                                        </div>
                                        <div class="ps-list__right">---</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ps-list">
                                        <div class="ps-list__left">
                                            <div class="ps-list__left--icon"><i class="mdi mdi-snapchat"></i></div>
                                            <div class="ps-list__left--name">微博</div>
                                        </div>
                                        <div class="ps-list__right">---</div>
                                    </div>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
                <!-- contact profile wrapper end -->
            </div>
        </div>
    </div>
</div>
<!-- main wrapper end -->

<!-- Javascripts Files -->
<script src="dist/js/jquery-3.4.1.min.js"></script>
<script src="dist/js/popper.min.js"></script>
<script src="assets/vendors/bootstrap/bootstrap.bundle.min.js"></script>
<script src="assets/vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="dist/js/main.js"></script>
<script src="dist/js/OnlyOneLogin.js"></script>
<script type="text/javascript">

    var myName;
    $(function () {
        $.post("getUserName", function (resultEntity) {
            if (resultEntity.resultFlag == true) {
                myName = resultEntity.data;

                $.post("getFriendList", {"userName": myName}, function (resultEntity) {
                    if (resultEntity.resultFlag == true) {
                        var friendList = resultEntity.data;
                        if (friendList != "--") {
                            $.post("getFriendDetail", {
                                "userName": myName,
                                "friendList": friendList
                            }, function (resultEntity) {
                                if (resultEntity.resultFlag == true) {
                                    var friendHtml = "";
                                    for (var i = 0; i < resultEntity.data.length; i++) {
                                        if (resultEntity.data[i].headImg != null && resultEntity.data[i].headImg != undefined && resultEntity.data[i].headImg != "") {
                                            friendHtml+="<li class='friendLi' onclick='active(this)'>\n" +
                                                "                                <div class=\"contactlist\">\n" +
                                                "                                    <div class=\"user-avatar user-avatar-rounded online\">\n" +
                                                "                                        <div class=\"chatriq-user chatriq-user-11\"></div>\n" +
                                                "                                    </div>\n" +
                                                "                                    <div class=\"contactlist__details\">\n" +
                                                "                                        <div class=\"contactlist__details--name\">"+resultEntity.data[i].username+"</div>\n" +
                                                "                                        <div class=\"contactlist__details--info\" id=\""+resultEntity.data[i].username+"\">---</div>\n" +
                                                "                                    </div>\n" +
                                                "                                </div>\n" +
                                                "                            </li>";
                                        } else {
                                            friendHtml+="<li class='friendLi' onclick='active(this)'>\n" +
                                                "                                <div class=\"contactlist\">\n" +
                                                "                                    <div class=\"user-avatar user-avatar-rounded online\">\n" +
                                                "                                        <div class=\"chatriq-user chatriq-user-11\"></div>\n" +
                                                "                                    </div>\n" +
                                                "                                    <div class=\"contactlist__details\">\n" +
                                                "                                        <div class=\"contactlist__details--name\">"+resultEntity.data[i].username+"</div>\n" +
                                                "                                        <div class=\"contactlist__details--info\" id=\""+resultEntity.data[i].username+"\">---</div>\n" +
                                                "                                    </div>\n" +
                                                "                                </div>\n" +
                                                "                            </li>";
                                        }
                                    }
                                    $("#friendHtml").html(friendHtml);

                                    //初始化好友的备注






                                    //初始化active
                                    $(".friendLi").each(function () {
                                        $(this).addClass("active");
                                        $(this).click();
                                        return;
                                    })


                                } else {
                                    layer.msg("获取好友列表失败，请刷新....");
                                }
                            });

                        } else {
                            return;
                        }
                    } else {
                        layer.msg("获取好友列表失败，请刷新...")
                    }
                });


            } else {
                layer.msg("您似乎未登录...")
            }
        });

        //寻找用户
        $("#findUser").click(function () {
            var userName = $("#findUserName").val();
            if (userName == "" || userName == undefined) {
                layer.msg("昵称为空...")
                return;
            }
            $.post("findUser", {"userName": userName}, function (resultEntity) {
                if (resultEntity.resultFlag == true) {
                    var OnlinePeopleList = "<ul class=\"list-unstyled\" >";
                    for (var i = 0; i < resultEntity.data.length; i++) {
                        OnlinePeopleList += "<li>\n" +
                            "                                        <div class=\"conversation \">\n" +
                            "\n" +
                            "                                            <div class=\"user-avatar user-avatar-rounded online\">\n" +
                            "                                                <div class=\"chatriq-user chatriq-user-11\"></div>\n" +
                            "                                            </div>\n" +
                            "                                            <div class=\"conversation__details\">\n" +
                            "                                                <div class=\"conversation__name\">\n" +
                            "                                                    <div class=\"conversation__name--title\">" + resultEntity.data[i] + "</div>\n" +
                            "                                                </div>\n" +
                            "                                                <div class=\"conversation__message\">\n" +
                            "                                                    <span><i class=\"mdi mdi-plus\" onclick=\"addFriend(this)\" id=\"" + resultEntity.data[i] + "\"></i></span>\n" +
                            "                                                </div>\n" +
                            "                                            </div>\n" +
                            "                                        </div>\n" +
                            "                                    </li>";
                    }
                    OnlinePeopleList += "</ul>";

                    var height = Number($(window).height()) * 0.8;
                    var width = Number($(window).width()) * 0.8;
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: [width + 'px', height + 'px'], //宽高
                        content: OnlinePeopleList,
                        title: '用户搜索结果'
                    });
                } else {
                    layer.msg("用户不存在...")
                }
            });
        });

    });

    function addFriend(obj) {
        var targetName = $(obj).attr("id");
        var userName = myName;

        if (userName == targetName) {
            layer.msg("无法添加自己...");
            return;
        }
        $.post("addFriend", {"userName": userName, "targetName": targetName}, function (resultEntity) {
            if (resultEntity.resultFlag == true) {
                layer.msg("添加好友成功...")
            } else {
                layer.msg("您已经添加过该好友...")
            }
        });
    }

    function active(obj) {

    }
</script>

</body>
</html>
